<template>
    <div class="landpai-content">
        <div v-if="landlordCardlog===false">
            <img 
            class="img"
            :src="imageUrl"
            ref="imageRef"
          />
        </div>
        <div v-else :class="{'red-pai':props.landlordCard.suit.color == 'red', 'black-pai':props.landlordCard.suit.color == 'black'}">
          {{ props.landlordCard.suit.log }}
          {{ props.landlordCard.rank }}
        </div>
    </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
const props = defineProps(['landlordCard','landlordCardlog'])
const imageUrl = ref('src/assets/paib.png');
console.log(props.landlordCard)
</script>

<style scoped lang="scss">
.landpai-content{
  width: 5%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #000; /* 边框样式 */
  box-sizing: border-box;
  border-radius: 4px;

    .red-pai{
      color: red;
      

  }

  .black-pai{
      color: black;
  }
}

.img{
        
    position: absolute;
    width:5vw;       // 容器宽度
    height: auto;      // 自动高度保持比例
  //   transformOrigin: 'left top', // 明确旋转基准点
  //   right: 0,            // 替代left定位
  //   top: '100%',         // 实现侧边旋转效果
  //   maxWidth: 'none'     // 防止宽度限制
  
}
</style>